<template>
  <div class="reset-container">
    <el-row>
      <el-col :lg="7" :md="2" :sm="2" :xl="7" :xs="1" />
      <el-col :lg="10" :md="20" :sm="20" :xl="10" :xs="22">
        <el-form ref="setRef" class="reset-form z-10" :model="resetForm" :rules="rules">
          <div class="title-tips flex justify-center">
            <div style="font-size: 28px; color: #1951ae">{{ translateTitle('Base.components.重置密码') }}</div>
          </div>
          <el-form-item prop="OLDPASSWORD">
            <el-input
              v-model.trim="resetForm.OLDPASSWORD"
              :placeholder="translateTitle('Base.components.请输入原始密码')"
              show-password
              tabindex="1"
              type="password"
            />
          </el-form-item>
          <el-form-item prop="NEWPASSWORD">
            <el-input
              v-model.trim="resetForm.NEWPASSWORD"
              :placeholder="translateTitle('Base.components.设置新密码')"
              show-password
              tabindex="2"
              type="password"
            />
            <!-- <p style="font-size: 12px; font-weight: 400; color: #86909c">请输入6个字符以上，数字加字母的组合密码</p> -->
          </el-form-item>
          <el-form-item prop="CONFIRM_NEWPASSWORD">
            <el-input
              v-model.trim="resetForm.CONFIRM_NEWPASSWORD"
              :placeholder="translateTitle('Base.components.请重新输入新密码')"
              show-password
              tabindex="3"
              type="password"
            />
            <!-- <p style="font-size: 12px; font-weight: 400; color: #f25757">与新密码不一致</p> -->
          </el-form-item>
          <el-form-item>
            <div class="flex justify-center">
              <el-button class="reset-btn" :loading="loading" @click="goBack">{{ translateTitle('Base.components.返回上一级') }}</el-button>
              <el-button class="reset-btn" :loading="loading" type="primary" @click="save">{{ translateTitle('Base.components.修改') }}</el-button>
            </div>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :lg="7" :md="2" :sm="2" :xl="7" :xs="1" />
    </el-row>
    <div class="reset-copyright">Copyright ©2022 中集创见(成都)科技有限公司</div>
  </div>
</template>
<script>
  import { translateTitle } from '@/utils/i18n'
  import { defineComponent } from 'vue'
  import request from '@/utils/request'
  import { GFCD } from '@/utils/utils'
  // import { isPassword } from '@/utils/validate'
  //6个字符以上，数字加字母的组合密码
  export default defineComponent({
    name: 'ResetPassword',
    components: {
      // Vcode,
    },
    data() {
      return {
        loading: false,
        resetForm: {
          OLDPASSWORD: '',
          NEWPASSWORD: '',
          CONFIRM_NEWPASSWORD: '',
        },
        rules: {
          OLDPASSWORD: [
            {
              required: true,
              trigger: 'blur',
              message: this.translateTitle('Base.components.原始密码不能为空'),
            },
          ],
          NEWPASSWORD: [
            {
              required: true,
              trigger: 'blur',
              validator: (rule, value, callback) => {
                const regRule = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$/
                if (value == '') {
                  let str = this.translateTitle('Base.components.新密码不能为空')
                  callback(new Error(str))
                } else if (!regRule.test(value)) {
                  let str = this.translateTitle('Base.components.请输入6个字符以上数字加字母的组合密码')
                  callback(new Error(str))
                } else if (value == this.resetForm.OLDPASSWORD) {
                  let str = this.translateTitle('Base.components.原密码和新密码不能输入一致')
                  callback(new Error(str))
                } else {
                  callback()
                }
              },
            },
          ],
          CONFIRM_NEWPASSWORD: [
            {
              required: true,
              trigger: 'blur',
              validator: (rule, value, callback) => {
                if (value == '') {
                  let str = this.translateTitle('Base.components.确认密码不能为空')
                  callback(new Error(str))
                } else if (value != this.resetForm.NEWPASSWORD) {
                  let str = this.translateTitle('Base.components.与新密码不一致')
                  callback(new Error(str))
                } else callback()
              },
            },
          ],
        },
      }
    },
    mounted() {
      if (this.$route.query.USER_ID) {
        this.resetForm.USER_ID = this.$route.query.USER_ID
      }
    },
    methods: {
      translateTitle,
      goBack() {
        this.$router.go(-1)
      },
      save() {
        this.$refs['setRef'].validate(async (valid) => {
          if (valid) {
            this.loading = true
            request({
              url: GFCD('dams', 'domain') + GFCD('dams', 'baseUrl'),
              method: 'post',
              data: {
                data: JSON.stringify(this.resetForm),
                method: 'sysUserServiceImpl.updatePasswordForLogin',
              },
              notOpenMessage: true,
              baseMessage: true,
            })
              .then(async (res) => {
                this.loading = false
                if (res.code == '00000') {
                  this.$baseMessage(res.msg, 'success')
                  await this.$store.dispatch('user/logout')
                  this.$router.push('/login')
                }
              })
              .catch((e) => {
                this.loading = false
                console.log(e)
              })
          } else {
            console.log(valid)
          }
        })
      },
    },
  })
</script>
<style lang="scss" scoped>
  .reset-container {
    height: 100vh;
    background: url('~@/assets/login_images/resetbg.png') center center fixed no-repeat;
    background-size: cover;
    overflow: hidden;
  }
  .reset-form {
    position: relative;
    max-width: 100%;
    padding: 4.5vh;
    margin: calc((100vh - 475px) / 2) 2vw 5vw;
    overflow: hidden;
    background-size: 100% 100%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    overflow: hidden;
    .title {
      font-size: 54px;
      font-weight: 500;
      color: var(--el-color-white);
    }
    .title-tips {
      margin: 10px 0 40px 0;
      div {
        font-size: 28px;
        font-family: Source Han Sans CN, Source Han Sans CN-Medium;
        font-weight: 500;
        text-align: center;
        color: #1951ae;
      }
    }
    .reset-btn {
      width: 160px;
      height: 40px;
    }

    .tips {
      margin-bottom: 10px;
      font-size: $base-font-size-default;
      color: var(--el-color-white);

      span {
        &:first-of-type {
          margin-right: 16px;
        }
      }
    }

    .title-container {
      position: relative;

      .title {
        margin: 0 auto 40px auto;
        font-size: 34px;
        font-weight: bold;
        color: var(--el-color-primary);
        text-align: center;
      }
    }

    i.icon-absolute {
      position: absolute;
      top: 8px;
      left: 5px;
      z-index: $base-z-index;
      font-size: 16px;
      color: #3270ff;
      cursor: pointer;
      user-select: none;
    }

    .show-password {
      position: absolute;
      right: 25px;
      left: -35px;
      font-size: 16px;
      color: #d7dee3;
      cursor: pointer;
      user-select: none;
    }

    // :deep() {
    //   .el-form-item {
    //     padding-right: 0;
    //     margin: 20px 0;
    //     color: #454545;
    //     background: transparent;
    //     border: 1px solid transparent;

    //     &__content {
    //       min-height: $base-input-height;
    //       line-height: $base-input-height;
    //     }

    //     &__error {
    //       position: absolute;
    //       top: 100%;
    //       left: 18px;
    //       font-size: $base-font-size-small;
    //       line-height: 18px;
    //       color: var(--el-color-error);
    //     }
    //   }

    //   .el-input {
    //     box-sizing: border-box;

    //     input {
    //       height: 44px;
    //       padding-left: 35px;
    //       font-size: $base-font-size-default;
    //       line-height: 44px;
    //     }
    //   }
    // }
  }
  .reset-copyright {
    text-align: center;
    font-weight: 400;
    color: #8a8bb1;
    font-size: 12px;
    position: absolute;
    bottom: 2px;
    width: 100%;
  }
</style>
